---
import PageLayout from "@/layouts/Base";
import { getAllTagsWithCount } from "@/util";
import type { Post } from "@/types";

const allPosts = await Astro.glob<Post>("../posts/*.mdx");
const allTags = getAllTagsWithCount(allPosts);

const meta = {
	title: "All Tags",
	description: "All Tags from my blogs",
};
---

<PageLayout meta={meta}>
	<h1 class="mb-6 title">标签</h1>
	<ul class="space-y-4">
		{
			Object.keys(allTags).map((tag) => (
				<li class="flex items-center gap-x-2">
					<a
						class="inline-block cactus-link"
						href={`/tags/${tag}`}
						title={`View posts with the tag: ${tag}`}
					>
						&#35;{tag}
					</a>
					<span class="inline-block">
						- {allTags[tag]} Post{allTags[tag] > 1 && "s"}
					</span>
				</li>
			))
		}
	</ul>
</PageLayout>
